<template>
    <view>
        <!--专辑 开始 -->
<!--         用户信息 开始 -->
        <view class="user_info">
            <view class="user_icon">
                <img :src="imgDetail.user.avatar" mode="widthFix">
            </view>
            <view class="user_desc">
                <view class="user_name">{{imgDetail.user.name}}</view>
                <view class="user_time">{{imgDetail.cnTime}}</view>
            </view>
        </view>
        <!-- 用户信息 结束 -->

        <!-- 高清大图 开始 -->
        <view class="high_img">
            <swiper-action @swiperAction="handleSwiperAction">
                <img mode="widthFix" :src="imgDetail.thumb">
            </swiper-action>

        </view>
        <!-- 高清大图 结束 -->

        <!-- 点赞+收藏 开始 -->
        <view class="user_rank">
            <view class="rank">
                <text class="iconfont icondianzan">{{imgDetail.rank}}</text>
            </view>
            <view class="collect">
                <text class="iconfont iconshoucang">收藏</text>
            </view>
        </view>
        <!-- 点赞+收藏 结束 -->

        <!-- 专辑信息 开始 -->
        <view class="album_wrap" v-if="album.length > 0">
            <view class="album_title">相关</view>
            <view class="album_list">
                <view class="album_item"
                v-for="(item,i) in album"
                :key="i">
                    <!-- 左边 开始 -->
                    <view class="album_cover">
                        <img :src="item.cover" mode="aspectFill">
                    </view>
                    <!-- 左边 结束 -->

                    <!-- 右边 开始 -->
                    <view class="album_info">
                        <view class="album_info_text">专辑</view>
                        <view class="album_name">{{item.name}}</view>
                        <text class="iconfont iconiconfontjiantou4"></text>
                    </view>
                    <!-- 右边 结束 -->
                </view>

            </view>
        </view>
        <!-- 专辑信息 结束 -->

        <!-- 最热评论 开始 -->
        <view class="comment hot">

            <!-- comment hot -->
            <view class="comment_title" v-if="hot.length > 0">
                <text class="iconfont iconhot1"></text>
                <text class="comment_text"> 最热评论 </text>
            </view>
            <!-- comment list -->
            <view class="comment_list">
                <view class="comment_item"
                      v-for="item in hot"
                      :key="item.id"
                >
                    <!-- 用户信息 -->
                    <view class="comment_user">
                        <!-- 用户头像 -->
                        <view class="user_icon">
                            <img mode="widthFix" :src="item.user.avatar">
                        </view>
                        <!-- 用户的名称 -->
                        <view class="user_name">
                            <view class="user_nickname">{{item.user.name}}</view>
                            <view class="user_time">{{item.cnTime}}</view>
                        </view>
                        <!-- 用户的徽章 -->
                        <view class="user_badge">
                            <img v-for="item_b in item .user.title"
                            :key="item_b.icon"
                            :src="item_b.icon">
                        </view>
                    </view>
                    <!-- 评论数据 -->
                    <view class="comment_desc">
                        <view class="comment_content">{{item.content}}</view>
                        <view class="comment_like">
                            <text class="iconfont icondianzan">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最热评论 结束 -->

        <!-- 最新评论 开始-->
        <view class="comment new" v-if="comment.length > 0">
            <view class="comment_title">
                <text class="iconfont iconpinglun"></text>
                <text class="comment_text">最新评论</text>
            </view>
            <view class="comment_list">
                <view class="comment_item"
                      v-for="item in comment"
                      :key="item.id"
                >
                    <!-- 用户信息 -->
                    <view class="comment_user">
                        <!-- 用户头像 -->
                        <view class="user_icon">
                            <img mode="widthFix" :src="item.user.avatar">
                        </view>
                        <!-- 用户的名称 -->
                        <view class="user_name">
                            <view class="user_nickname">{{item.user.name}}</view>
                            <view class="user_time">{{item.cnTime}}</view>
                        </view>
                        <!-- 用户的徽章 -->
                        <view class="user_badge">
                            <img v-for="item_b in item .user.title"
                                   :key="item_b.icon"
                                   :src="item_b.icon">
                        </view>
                    </view>
                    <!-- 评论数据 -->
                    <view class="comment_desc">
                        <view class="comment_content">{{item.content}}</view>
                        <view class="comment_like">
                            <text class="iconfont icondianzan">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最新评论 结束 -->

        <!-- 下载 开始 -->
        <view class="download">
            <view class="download_btn" @click="handleDownload">下载图片</view>
        </view>
        <!-- 下载 结束 -->
        <!-- 专辑 结束 -->
    </view>
</template>

<script>
import moment from 'moment'
import swiperAction from "@/components/swiperAction";
// 设置语言为中文
moment.locale("zh-cn");
export default {
    components: {
        swiperAction
    },
    name: "index",
    data() {
        return {
            // 图片信息对象 包含着用户头像
            imgDetail: {},
            // 专辑评论对象
            album: [],
            // 最热评论
            hot: [],
            // 最新评论
            comment: [],
            // 图片索引
            imgIndex: 0

        }
    },
    onLoad() {
        const { imgIndex } = getApp().globalData;

        this.imgIndex = imgIndex;
        this.getData();

    },
    methods: {
        getData() {
            const { imgList } = getApp().globalData;
            // 获取数据
            this.imgDetail = imgList[this.imgIndex];
            // xxx 年前的数据
            this.imgDetail.cnTime = moment(this.imgDetail.atime*1000).fromNow();

            // 获取图片详情的id
            // this.imgDetail.id
            this.getComments(this.imgDetail.id)
        },
        getComments(id) {
            // const onlyId = "5a13d879e7bce743777223e4";
            this.request({
                url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
            }).then(result => {
                // console.log(result)
                this.album = result.res.album;

                // 给hot 数组中的对象添加一个时间属性 xxx月前;
                result.res.hot.forEach( v => v.cnTime = moment(v.atime * 1000).fromNow());
                result.res.comment.forEach( v => v.cnTime = moment(v.atime*1000).fromNow());

                this.hot = result.res.hot;
                this.comment = result.res.comment;
            })
        },
        // 滑动事件
        handleSwiperAction(e) {
            /*
            * 1、用户 左滑 imgIndex++
            * 2、用户 右滑 imgIndex--
            * 3、判断 数组是否越界问题
            * 4、左滑的时候 e.direction === "left" && this.imgIndex < imgList.length-1
            * 5、右滑的时候 e.direction === "right" && this.imgIndex > 0
            * */
            const { imgList } = getApp().globalData;
            if (e.direction === "left" && this.imgIndex < imgList.length-1) {
                // 可以进行左滑，加载下一页操作
                this.imgIndex ++;
                this.getData()
            }else if (e.direction === "right" && this.imgIndex > 0) {
                this.imgIndex --;
                this.getData()
            }else {
                uni.showToast({
                    title: "已经没有图片了",
                    icon: "none"
                })
            }
        },
        // 点击 下载 图片 asyns await promise
        async handleDownload() {
            // uni.downloadFile()
            // uni.saveImageToPhotosAlbum()

            await uni.showLoading({
                title: "下载中"
            });

            // 1、将远程文件下载到小程序内存中 tempFilePath（临时路径）
            const result1 = await uni.downloadFile({ url: this.imgDetail.img })
            const { tempFilePath } = result1[1];

            // 2、将小程序内存中的临时文件下载到本地上
            await uni.saveImageToPhotosAlbum({ filePath: tempFilePath });
            // 3、提示用户下载成功
            // console.log('下载成功')

            uni.hideLoading();
            await uni.showToast({ title: "下载成功" })
        }
    }
}
</script>

<style scoped lang="scss">
    .user_info{
        display: flex;
        padding: 20rpx;
        .user_icon{
            padding: 0 20rpx;
            img{
                width: 88rpx;
                border-radius: 50%;
            }
        }
        .user_desc{
            .user_name{
                color: #000;
                font-weight: 900;
            }
            .user_time{
                color: #ccc;
                font-size: 24rpx;
                padding: 10rpx 0;
            }
        }
    }

    .user_rank{
        display: flex;
        height: 80rpx;
        padding: 10rpx 0;
        border-bottom: 5rpx solid #eee;
        .rank{
            display: flex;
            justify-content: center; /* 水平居中*/
            align-content: center; /* 垂直居中*/
            flex: 1;
            .iconfont{}
        }
        .collect{
            display: flex;
            justify-content: center; /* 垂直居中*/
            align-content: center; /* 水平居中*/
            flex: 1;
            .iconfont{}
        }
    }

    .high_img{
        img{
            border-bottom: 1rpx solid #eee;
        }
    }

    .album_wrap{
        padding: 20rpx;
        .album_title{
            padding: 10rpx 0;
        }
        .album_list{
            .album_item{
                display: flex;
                padding: 10rpx 0;
                border-bottom: 10rpx solid #eee;
                .album_cover{
                    flex: 1;
                    img{
                        width: 180rpx;
                        height: 180rpx;
                    }
                }
                .album_info{
                    flex: 3;
                    padding-left: 20rpx;
                    position: relative;
                    .album_info_text{
                        width: 100rpx;
                        height: 50rpx;
                        border-radius: 6rpx;
                        background-color: $color;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-content: center;
                    }
                    .album_name{
                        padding: 10rpx 0;
                        color: #888;
                    }
                    .iconfont{
                        font-size: 40rpx;
                        position: absolute;
                        top: 50%;
                        // css3 变换 转换
                        transform: translateY(-50%);
                        right: 10%;
                        color: #000;
                    }
                }
            }
        }
    }

    .comment{
        .comment_title{
            padding: 15rpx;
            .iconfont{
                color: red;
                font-size: 40rpx;
            }
            .comment_text{
                font-weight: 600;
                font-size: 28rpx;
                color: #666;
                margin-left: 10rpx;

            }
        }

        .comment_list{
            .comment_item{
                border-bottom: 15rpx solid #eee;
                /*用户信息*/
                .comment_user{
                    display: flex;
                    .user_icon{
                        width: 15%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            width: 90%;
                        }
                    }
                    .user_name{
                        flex: 1;
                        .user_nickname{
                            color: #1F1F21;
                        }
                        .user_time{
                            color: #ccc;
                            font-size: 24rpx;
                            padding: 5rpx 0;
                        }
                    }
                    .user_badge{
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            display: inline-block;
                        }
                    }
                }
                /*评论数据*/
                .comment_desc{
                    display: flex;
                    padding: 30rpx 0;
                    .comment_content{
                        color: #000;
                        flex: 1;
                        padding-left: 15%;

                    }
                    .comment_like{
                        text-align: right;
                        .iconfont{}
                    }
                }
            }
        }
    }

    /* 最新评论 */
    .new{
        .iconpinglun{
            color: aqua!important;
        }
    }

    .download{
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .download_btn{
            width: 90%;
            height: 85%;
            background-color: $color;
            color: #fff;
            font-size: 50rpx;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;

        }
    }



</style>
